
<template>
  <h2>toRefs的使用</h2>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <button @click="btnClick">更新数据</button>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({
      name: '刘柏麟',
      age: 18
    })
    const btnClick = () => {
      state.name = '胭脂'
      state.age = 60
    }
    return {
      ...toRefs(state),
      btnClick
    }
  }
})
</script>

<style scoped>
</style>